<template>
  <div class="drugstore-container">
    <!--面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>药库管理</el-breadcrumb-item>
      <el-breadcrumb-item>取药列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <div class="drugstore-number-wrapper">第{{user.userId}}号药房</div>
      <el-row>
        <el-col :span="6">
          <div class="medication-collection-title">抓药列表</div>
        </el-col>
        <el-col :span="18">
          <div class="prescription-detail-title">药品清单</div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="5" class="left-col-wrapper">
          <el-table
              border
              highlight-current-row
              class="medication-collection-table"
              @current-change="handleCurrentChange"
              :data="patientList"
              style="width: 100%">
            <el-table-column
                type="index"
                width="40">
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名"
                width="100">
            </el-table-column>
            <el-table-column
                prop="cardNo"
                label="就诊卡号">
            </el-table-column>
          </el-table>

          <div class="waiting-patient-title">取药患者列表</div>
          <el-table
              border
              highlight-current-row
              class="medication-collection-table"
              @current-change="handleCurrentWaitPatientChange"
              :data="waitPatientList"
              style="width: 100%">
            <el-table-column
                type="index"
                width="40">
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名"
                width="100">
            </el-table-column>
            <el-table-column
                prop="cardNo"
                label="就诊卡号">
            </el-table-column>
          </el-table>
          <div class="btn-wrapper">
            <el-button type="success" @click="handleFinishTakeMedicine">完成取药</el-button>
          </div>
        </el-col>
        <el-col :span="19" class="right-col-wrapper">
          <div class="prescription-wrapper">
            <div class="prescription-title">
              普通处方笺
            </div>
            <div class="prescription-patient-info">
              <el-descriptions>
                <el-descriptions-item label="姓名">{{patient.name}}</el-descriptions-item>
                <el-descriptions-item label="性别">
                  <span v-if="patient.sex!=null">{{patient.sex==0?'男':'女'}}</span>
                </el-descriptions-item>
                <el-descriptions-item label="年龄">{{patient.age}}</el-descriptions-item>
                <el-descriptions-item label="处方编号">{{patient.age}}</el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="doctor-advice">
              <el-descriptions class="" :column="1" direction="vertical">
                <el-descriptions-item label="药品明细">
                  <el-table
                      :header-cell-style="{ background: '#f3f6fd', color: '#555' }"
                      :data="prescriptionDetailList"
                      max-height="250"
                      border
                      style="width: 100%">
                    <el-table-column
                        prop="params.medName"
                        label="药品名称"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="params.specifications"
                        label="规格">
                    </el-table-column>
                    <el-table-column
                        prop="consumption"
                        label="用量">
                    </el-table-column>
                    <el-table-column
                        prop="amount"
                        label="数量">
                    </el-table-column>
                  </el-table>
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
          <div class="btn-wrapper">
            <el-button type="primary" @click="finishMedicationCollection">完成抓药</el-button>
          </div>
        </el-col>
      </el-row>

    </el-card>
  </div>
</template>

<script>
import {mapState} from "vuex"
import prescriptionApi from "@/api/prescription";
import patientApi from "@/api/patient";

export default {
  name: "DrugStoreIndex",
  data(){
    return{
      socket:null,
      prescription:{},
      patient:{},
      waitPatient:{},
      prescriptionDetailList:[],
      patientList:[],
      waitPatientList:[],//待取药患者列表
    }
  },
  computed:{
    ...mapState(['user'])
  },
  created() {
    this.init()
  },
  destroyed() {
    this.socket.close() //离开路由之后断开websocket连接
  },
  methods:{
    init(){
      const userId = this.user.userId
      this.socket = new WebSocket(`ws://localhost:8080/ws/drugstore/${userId}`)
      this.socket.onmessage = this.websocketonmessage;
      this.socket.onopen = this.websocketonopen;
      this.socket.onerror = this.websocketonerror;
      this.socket.onclose = this.websocketclose;
      this.getPatientList()
    },
    websocketonmessage(e){
      console.log(e)
      const msg = JSON.parse(e.data)
      switch (msg.action){
        case 'updatePatientList':{
          this.getPatientList(this.user.userId)
          return
        }
        default:return
      }
    },
    websocketonopen(){

    },
    websocketonerror(){

    },
    websocketclose(){

    },
    async getPatientList(){
      const{data:res} = await patientApi.getMedicatedPatientList(this.user.userId)
      const{data:resp} = await patientApi.getWaitPatientList(this.user.userId)
      this.patientList = res.data
      this.waitPatientList = resp.data
    },
    async handleCurrentChange(currentRow,oldCurrentRow){
      if (currentRow==null){
        return
      }
      this.patient = currentRow
      const prescriptionId = currentRow.params.prescriptionId
      const{data:res} = await prescriptionApi.getById(prescriptionId)
      this.prescription = res.data
      const{data:resp} = await prescriptionApi.getPastPrescriptionDetail(prescriptionId)
      this.prescriptionDetailList = resp.data
    },
    handleCurrentWaitPatientChange(currentRow,oldCurrentRow){
      this.waitPatient = currentRow
    },
    async finishMedicationCollection(){
      const prescriptionId = this.patient.params.prescriptionId
      const{data:res} = await prescriptionApi.notifyMedicationCollection(prescriptionId,this.user.userId)
      if (res.data==true){
        this.prescriptionDetailList=[]
        this.patient={}
        await this.getPatientList()
      }
    },
    async handleFinishTakeMedicine(){
      const prescriptionId = this.waitPatient.params.prescriptionId
      const{data:res} = await prescriptionApi.finishTakeMedicine(prescriptionId,this.user.userId)
      if (res.data==true){
        await this.getPatientList()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.drugstore-container{
  .box-card{
    .waiting-patient-title,.prescription-detail-title,.medication-collection-title{
      font-size: 16px;
      font-weight: 700;
    }
    .left-col-wrapper{
      padding-right: 30px;
      border-right: 2px black solid;
      .medication-collection-table{
        margin-bottom: 20px;
      }
    }
    .right-col-wrapper{
      .prescription-wrapper{
        border-bottom: solid 2px black;
        height: auto;
        width: 700px;
        margin: 0 auto;
        .prescription-title{
          text-align: center;
          font-size: 24px;
          font-weight: bold;
          letter-spacing:5px;
          padding-bottom: 10px;
        }
        .prescription-patient-info{
          border-bottom: solid 2px black;
          margin-bottom: 10px;
        }
      }
      .btn-wrapper{
        text-align: right;
        height: auto;
        width: 700px;
        margin: 0 auto;
        padding-top: 20px;
      }
    }
  }
  .drugstore-number-wrapper{
    margin-bottom: 10px;
  }
}
</style>